<template>
  <button :class="'i-button-size '+size+' '+type"
          @click="handleClick"
          :disabled='disabled'>
    <slot name="icon"></slot>
    <slot>提交</slot>
  </button>
</template>
<script>
// 判断参数是否是其中之一
function oneOf (value, validList) {
  for (let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true
    }
  }
  return false
}
export default {
  name: 'i-button',
  props: {
    size: {
      validator (value) {
        return oneOf(value, ['small', 'large', 'default'])
      },
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      validator (value) {
        return oneOf(value, ['success', 'danger', 'primary'])
      },
      default: 'primary'
    }
  },
  methods: {
    handleClick (event) {
      this.$emit('on-click', event)
    }
  }
}
</script>
<style scoped>
.i-button-size {
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px;
  cursor: pointer;
}
.large {
  width: 100px;
  height: 50px;
}
.default {
  width: 80px;
  height: 40px;
}
.small {
  width: 50px;
  height: 30px;
}
.success {
  color: green;
}
.danger {
  color: red;
}
.primary {
  color: blue;
}
</style>